<template>
    <div>
        <p>{{now}}</p>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
</template>

<script>
    export default {
        name: "DemoComputed",
        data() {
            return {
                message: 'Hello'
            }
        },
        //计算属性是基于它们的响应式依赖进行缓存的。
        // 只在相关响应式依赖发生改变时它们才会重新求值。
        // 这就意味着只要 message 还没有发生改变，
        // 多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            },

            //下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖
            now: function () {
                return Date.now()
            }
        }
    }
</script>

<style scoped>

</style>
